<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 分割线 -->
		<view
			style="width: 100%; height: 10rpx;background-color: #F7F8FF;margin-top: 20rpx;"
		></view>

		<!-- 服务项目 -->
		<view style="width: 702rpx;margin-top: 19rpx;">
			<!-- 标题 -->
			<text style="font-size: 30rpx;color: #333333;align-self: flex-start;">预约项目</text>
			<!-- 分割线 -->
			<view
				style="width: 100%;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"
			></view>

			<!-- 服务项目多选框 -->
			<checkbox-group @change="checkboxChange"    style="margin-top: 20rpx;">
				<label
					style="width: 100%; display: flex;justify-content: space-between;align-items: center; margin-top: 30rpx;"
					v-for="(item, index) in allList"
					:key="item.id"
				>
					<view style="font-size: 28rpx;color: #666666;">{{ item.title }}</view>
					<view>
						<checkbox
							:value="item.value"
							style="transform: scale(0.8);"
						/>
					</view>
					<!-- :checked="item.checked" -->
				</label>
			</checkbox-group>
		</view>

		<!-- 分割线 -->
		<view
			style="width: 100%; height: 10rpx;background-color: #F7F8FF;margin-top: 20rpx;"
		></view>

		<!-- 上传照片 -->
		<view style="width: 702rpx;margin-top: 19rpx;">
			<!-- 标题 -->
			<text style="font-size: 30rpx;color: #333333;align-self: flex-start;">上传照片</text>
			<!-- 上传照片 -->
			<view
				style="width: 702rpx; display: flex;flex-direction: row; flex-wrap: wrap;margin-top: 20rpx;"
			>
				<sunui-upoos
					:upImgConfig="upImgOos"
					@onUpImg="upOosData"
					@onImgDel="delImgInfo"
					ref="uImage"
				></sunui-upoos>
			</view>
		</view>

		<!-- 分割线 -->
		<view
			style="width: 100%; height: 10rpx;background-color: #F7F8FF;margin-top: 20rpx;"
		></view>
		<!-- 价格 -->
		<view style="width: 702rpx;margin-top: 20rpx;font-size: 28rpx;color: #333333;">
			<view style="display: flex;justify-content: space-between;">
				<text>应收金额:</text>
				<text>￥369.00</text>
			</view>
			<view
				style="width: 100%;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"
			></view>
			<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
				<text>实收金额:</text>
				<input
					style="text-align: end;"
					placeholder="输入金额"
					@input="inputKey"
					type="digit"
				/>
			</view>
		</view>
		<view style="width: 1;height: 120rpx;"></view>

		<!-- 核销按钮 -->
		<view
		@click="btnok"
			style="width: 100%;height: 80rpx; position: fixed;bottom: 0px;align-self: center;text-align: center;background-color: #4B9EFF;
		font-size: 26rpx;color: #FFFFFF;line-height: 80rpx;"
		>
			确认核销
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList:[], //左侧数据，服务类
			jingangqu:[],//分类
			carbox:[], //确认订单提交盒子
			digit:'',
			oosArr: [],
			// orderlistitem: {},
			// orderlistitemone: {},
			orderlistitem:[],
			orderlistitembox: {},
			// 阿里云oos相关配置
			upImgOos: {
				aliConfig: {
					// 阿里云oos上传key_secret(后端传)
					AccessKeySecret: '5iB8rf4vSVl4HmqWOMPIOkAgzmPvI8',
					// 阿里云oos上传key_id(后端传)
					OSSAccessKeyId: 'LTAI4wU5hODbg7FX',
					// 阿里云oos上传目录(必须存在)
					oosDirectory: 'uniapp',
					// 阿里云上传url
					url: 'http://sunui-uniapp.oss-cn-beijing.aliyuncs.com/'
				},
				// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
				notli: false,
				// 图片数量
				count: 4,
				// 上传图片背景修改
				upBgColor: '#F7F8FF',
				// 上传icon图标颜色修改(仅限于iconfont)
				upIconColor: '#666666',
				// 上传svg图标名称
				upSvgIconName: 'icon-certificate'
			},
			allList: [
				{
					value: 1,
					name: '空调清洗',
					checked: false
				},
				{
					value: 2,
					name: '机油更换',
					checked: false
				},
				{
					value: 3,
					name: '抛光打蜡',
					checked: false
				},
				{
					value: 4,
					name: '发动机清洗',
					checked: false
				}
			],
			appointmentList: [1, 2]
		};
	},
	onLoad() {
		this.getData(); //左边数据海选
		this.getInfoData(); //首页分类
		this.orderlistitem = this.$Route.query.item; //携带的订单数据
		this.orderlistbox();
		
		this.employeesdetails();
		// 后端传来用户已经预约的服务(数组appointmentList)
		// 将已预约的服务与全部服务进行对比,把已预约的标记为已勾选
		// for (
		// 	let i = 0, appointmentListLen = this.appointmentList.length;
		// 	i < appointmentListLen;
		// 	i++
		// ){
		// 		// dataList================已处理，为服务数据
		// 	// appointmentList   ===========已处理，为当前订单详情
		// 	//与全部服务进行对比
		// 	for (let n = 0, allListLen = this.allList.length; n < allListLen; n++) {
		// 		// 逐个对比,将已预约的设置为已勾选状态
		// 		if (this.allList[n].value == this.appointmentList[i]) {
		// 			this.allList[n].checked = true;
		// 		}
		// 	}
		// }
		
		
		// for (
		// 	let i = 0, appointmentListLen = this.appointmentList.length;
		// 	i < appointmentListLen;
		// 	i++
		// ){
		// 		// dataList================已处理，为服务数据
		// 	// appointmentList   ===========已处理，为当前订单详情
		// 	//与全部服务进行对比
		// 	for (let n = 0, allListLen = this.dataList.length; n < allListLen; n++) {
		// 		// 逐个对比,将已预约的设置为已勾选状态
		// 		if (this.dataList[n].value == this.appointmentList[i]) {
		// 			this.dataList[n].checked = true;
		// 		}
		// 	}
		// }
		setTimeout(() => {
			console.log('res :>>=============for -of ', );
			var dataLists = this.dataList;
			var appointmentLists = this.appointmentList;
			console.log("dataList: ========array",this.appointmentList);
			dataLists.forEach((item,index) => {
				console.log("item: ",item);
				appointmentLists.forEach((e,i) => {
					if(item.id === e.goods_id) {
						// this.appointmentLists[item].checked = true;
						console.log("11111111111: ",);
						this.dataList[item].checked = true;
					}
					return;
				})
			})
		},300)
	},
	methods: {
		// 获取接口响应数据
		async orderlistbox(){

		},
		btnok(){
			let pushcar = [];
			for(var item in this.dataList) {
				pushcar.push(item)
			}
			
			console.log("pushcar: ",pushcar);
		},
		// 获取首页数据
		async getInfoData() {
			let res;
			try {
				res = await this.$request.post('addons/shopro/index/template', {
					header: {
						platform: 'wxMiniProgram'
					}
				});
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none'
				});
			}
			//提取金刚区菜单
			var jingangqu = res.data.data.home[2].content.list.slice(0, 8);
			var jinggangquarr = [];
			jingangqu.forEach((item,index) =>{
				// var jinggangquarr = [];
				// console.log("item: ",item);
					if(item.path_name !== '') {
						// item.path_name.slice(item.path_name.indexOf('商品列表') + 1);
						var itemm = item.path_name.split('-')[1]
						jinggangquarr.push(itemm)
					}
					// return;
					this.jingangqu = jinggangquarr;
					// console.log("this.jingangqu: ",this.jingangqu);
			})
		},
		// coupons_id 优惠劵id
		
		// goods_id: this.carid, //产品id
		// goods_num: 1,
		// sku_price_id: this.id, //规格id
		// goods_price: this.caridbox.price,
		// 服务左侧数据
		async getData(){
			let res;
			try {
				res = await this.$request.get('addons/shopro/goods/lists',{
					data: {
						category_id: 2, //1是汽车，2是服务
						page: 1,
						// category_id:id
					}
				});
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none'
				});
			}
			console.log('serviceData===',res.data.data.data);
			
			this.dataList = res.data.data.data;
			this.allList = this.dataList;
			var arr1 = allList;
			arr1.unshift(this.check)
			this.allList = arr1;
			// this.allList.forEach((item,index) => {
			// 	console.log("item: ",item);
			// })
		},
		// 订单详情
		async employeesdetails() {
			let res;
			try{
				 res = await this.$request.get('addons/shopro/staff/detail',{
					data:{
						order_sn:this.orderlistitem.order_sn,
						id:this.orderlistitem.id,
					}
				})
			}catch(e){
				console.log("e: ",e);
				//TODO handle the exception
				return uni.showToast({
					title:'网络连接失败',
					icon:'none'
				});
			}
			console.log("res: ",res.data.data.item);
			this.appointmentList = res.data.data.item; //订单数据
			
			console.log("this.appointmentList: ",this.appointmentList);
			this.verificationbtn(); //要做点击，未修改
		},
		 //产品id goods_id
		async verificationbtn(){
				let res;
				// try {
					
				// 	res = await this.$request.post('addons/shopro/staff/writeoff', {
						
						
				// 	// {goods_list: 
				// 	// [
				// 	// 	{	goods_id: this.orderlistitemone.goods_id, 
				// 	// 		goods_num: this.orderlistitemone.goods_num, 
				// 	// 		sku_price_id: this.orderlistitemone.goods_num, 
				// 	// 		goods_price: this.orderlistitemone.goods_price,
				// 	// 	},
				// 	// ], 
				// 	// 	from: "cart",
				// 	// 	coupons_id:"0",
				// 	// 	order_id:"1",
				// 	// 	hexiao_fee:"1000",
				// 	// }	
				// 		data:{
				// 			goods_id: this.orderlistitemone.goods_id,
				// 			goods_num: this.orderlistitemone.goods_num,
				// 			sku_price_id: this.orderlistitemone.goods_num,
				// 			goods_price: this.orderlistitemone.goods_price,
				// 			// from: ,
				// 			coupons_id:this.orderlistitem.coupons_id,
				// 			order_id:this.orderlistitemone.goods_id,
				// 			hexiao_fee:1
				// 		},
				// 		header:{
				// 			 contentType: "application/json;charset=utf-8",
				// 		},
				// 			// dataType: 'json',
				// 			// responseType: 'text'
				// 	},
					
					// );
				// } catch (e) {
				// 	console.log('e: ', e);
				// 	//TODO handle the exception
				// 	return uni.showToast({
				// 		title: '网络连接失败',
				// 		icon: 'none'
				// 	});
				// }
				// console.log('res: ', res);
				// console.log('orderlistitemone: ', this.orderlistitemone);
				// this.orderlistitembox = res.data.data.data;
		},
		// 预约项目的多选框状态改变触发
		checkboxChange: function(e) {
			console.log('e :>> ', e);
			// console.log(e.detail.value);
			this.carbox = e.detail.value;
			console.log('e :>> ', e);
			// console.log("this.carbox: ",this.carbox);
		},
		// checkboxChangee(e){
		// 	console.log('e11111 :>> ', e);
		// },
		// 输入实收金额的时候触发
		inputKey(e) {
			console.log(e.target.value);
		},
		// 阿里云部分
		uImageTap() {
			this.$refs.uImage.uploadimage(this.upImgOos);
		},
		// 删除图片 -2019/05/12(本地图片进行删除)
		async delImgInfo(e) {
			console.log('你删除的图片地址为:', e, this.oosArr.splice(e.index, 1));
		},
		// 阿里云
		async upOosData(e) {
			// 上传图片数组
			let arrImg = [];
			for (let i = 0, len = e.length; i < len; i++) {
				try {
					if (e[i].path_server != '') {
						await arrImg.push(e[i].path_server.split(','));
					}
				} catch (err) {
					console.log('上传失败...');
				}
			}
			// 图片信息保存到data数组
			this.oosArr = arrImg;

			// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
			if (arrImg.length == this.upImgOos.count) {
				uni.showToast({
					title: `上传成功`,
					icon: 'none'
				});
			}
		},
		// 获取上传图片阿里云
		getUpImgInfoOos() {
			console.log('阿里云转成一维数组:', this.oosArr.join().split(','));
		}
		// 阿里云部分结束
	}
};
</script>

<style></style>
